<template>
  <div class="hello">
    <div class="header">
      <!--<i class="iconfont icon-zyojiantou"></i>-->
      <!--{{smsPostfix}}-->
      <!--浙江省青少年校外教育中心-->
      {{spelName}}
    </div>
    <div class="pickerBox">
      <div class="picker">
        <ul>
          <!--<li>
            <el-cascader
              :options="optionsSpelId"
              v-model="selectedOptionsSpelId"
              @active-item-change=""
              @change="changeAreaSelected"
              placeholder="区域"
              :show-all-levels="false">
            </el-cascader>-->
          </li>
          <li style="width: 50%;">
            <el-cascader
              :options="optionsTerm"
              v-model="selectedOptionsTerm"
              @change="changeTermSelected"
              placeholder="学期"
              :show-all-levels="false">
            </el-cascader>
          </li>
          <li style="width: 50%;">
            <el-cascader
              :options="optionsArea"
              :props="propsArea"
              v-model="selectedOptionsArea"
              @change="changeSpelIdSelected"
              :placeholder="specialtyText"
              :show-all-levels="false">
            </el-cascader>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="content.length <= 0" class="notNotice">
      暂无数据
    </div>
    <div v-show="content.length > 0" class="contentList">
      <div class="listOne" @click="goCourseDetails(contents.id)" v-for="contents in content">
        <div class="listOneTop">
          <div class="listOneNameBox"><span class="listOneName">{{contents.name}}</span><em>(￥{{contents.totalFees}})</em></div>
          <span  class="listOneing" v-if="contents.frontStatusName == '报名进行中'">报名中</span>
          <span  class="listOneStuar" v-else >{{contents.frontStatusName}}</span>
          <i v-if="contents.applyable == true" class="iconfont icon-add jiahao"></i>
          <i v-else class="iconfont icon-delete jianhao"></i>
        </div>
        <div class="listOneTitle">年份：{{contents.year}}&nbsp;&nbsp;&nbsp;学期：{{contents.term}}&nbsp;&nbsp;&nbsp;班级代码：{{contents.classNo}}</div>
        <div class="listOneText">
          <p><i class="iconfont icon-icon2"></i> 学校（程度）：<span>{{contents.spelName}}（{{contents.degree}}）</span></p>
          <p><i class="iconfont icon-icon2"></i> 报名限制：<span>{{contents.applyLimit}}</span></p>
          <p><i class="iconfont icon-icon2"></i> 服务时间：<span>{{contents.timeable}}</span></p>
          <!--<div class="upClassTime">
            <div class="upClassTitle"><i class="iconfont icon-icon2"></i> 上课时间和地点：</div>
            <div class="upClassHow">{{contents.timeable}}</div>
          </div>-->
        </div>
      </div>
      <div v-show="content.length > 0" @click="lookmore" class="moreBtn">查看更多</div>
    </div>
  </div>
</template>

<style lang="scss" src='./Hello.scss'></style>
<script src="./Hello.js"></script>
